<template>
  <div class="returnTop_container" v-show="showgo">
    <div class="goTop" @click="goTop">
      <img src="./images/回到顶部.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [],
  data() {
    return {
      showgo: false,
    };
  },
  created() {
    window.addEventListener("scroll", this.onscroll);
  },
  methods: {
    //窗口滑动的事件
    onscroll() {
      if (document.documentElement.scrollTop > 500) {
        this.showgo = true;
      } else {
        this.showgo = false;
      }
    },
    //回到顶部
    goTop() {
      scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.onscroll);
  },
};
</script>

<style lang="less" scoped>
.goTop {
  position: fixed;
  bottom: 70px;
  right: 20px;
  width: 40px;
  height: 40px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>